<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader />
        <MyList :todos="todos" />
        <MyFooter :todos="todos" />
        <!-- <MyFooter :todos="todos" :checkAll="checkAll" ref="MyFooter"/> -->
      </div>
    </div>
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";
import MyFooter from "./components/MyFooter.vue";
export default {
  name: "App",
  components: {
    MyHeader,
    MyList,
    MyFooter,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || [],
    };
  },
  mounted() {
    //header添加
    this.$bus.$on("addtodo", (data) => {
      this.todos.unshift(data);
      localStorage.setItem("todos", JSON.stringify(this.todos));
    });
    //item勾选
    this.$bus.$on("changecheckbox", (id) => {
      this.todos.forEach((item) => {
        if (item.id === id) {
          item.done = !item.done;
        }
      });
      localStorage.setItem("todos", JSON.stringify(this.todos));
    });
    //item修改
    // App.vue
    this.$bus.$on("changetodoTitle", ({ id, title }) => {
      this.todos.forEach((item) => {
        if (item.id === id) {
          item.title = title;
        }
      });
      localStorage.setItem("todos", JSON.stringify(this.todos));
    });
    //item删除
    this.$bus.$on("deleteItem", (id) => {
      if (confirm("确认吗?")) {
        this.todos = this.todos.filter((todo) => todo.id != id);
        localStorage.setItem("todos", JSON.stringify(this.todos));
      }
    });
    //footer全选
    this.$bus.$on("checkAll", (done) => {
      this.todos.forEach((todo) => (todo.done = done));
      localStorage.setItem("todos", JSON.stringify(this.todos));
    }),
      //footer删除已完成
      this.$bus.$on("deleteChecked", () => {
        this.todos = this.todos.filter((todo) => {
          return !todo.done;
        });
        localStorage.setItem("todos", JSON.stringify(this.todos));
      });
  },
  beforeDestroy() {
    this.$bus.$off("addtodo");
    this.$bus.$off("changecheckbox");
    this.$bus.$off("deleteItem");
    this.$bus.$off("checkAll");
    this.$bus.$off("deleteChecked");
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f5f5;
  /* 页面浅灰背景，降低视觉疲劳 */
  padding: 50px 0;
  /* 上下留白，让容器不贴边 */
}

/* 容器样式：居中+白色背景+阴影，突出内容区域 */
#root {
  display: flex;
  justify-content: center;
}

.todo-container {
  background-color: #fff;
  /* 白色卡片，干净清爽 */
  padding: 30px;
  width: 100%;
  max-width: 600px;
  /* 最大宽度限制，避免大屏下过宽 */
  border-radius: 12px;
  /* 圆角设计，柔和不尖锐 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* 轻微阴影，提升层次感 */
}

/* 头部输入框样式：强调交互感 */

/* 响应式适配：小屏幕（手机）调整样式 */
@media (max-width: 768px) {
  .todo-container {
    padding: 20px;
    margin: 0 15px;
    /* 小屏幕左右留白，避免贴边 */
  }

  .todo-header input {
    height: 44px;
    font-size: 15px;
  }

  .todo-main li {
    padding: 12px 14px;
  }

  .todo-footer {
    font-size: 13px;
  }
}
</style>